import React, { useEffect, useState } from 'react'
import { useHistory } from 'react-router'
import icon_back_black from "@/assets/icon_back_black.png"
import icon_back_white from "@/assets/icon_back_white.png"
import icon_add_favorite_white from "@/assets/icon_add_favorite_white.png"
import icon_add_favorite from "@/assets/icon_add_favorite.png"
import { useDispatch } from 'react-redux';
import { DotLoading, Mask } from 'antd-mobile';
import './navigateBar.css';
import '../../App.css'
import { LangThai } from '@/utils/langThai';

/**
 * 
 * @param {*} theme 主题，black(背景黑色，文字为白色), white(背影白色，文字为黑色), transparent(背影透明，文字为白色)
 * @returns 
 */
function NavigateBar({ theme = 'white', leftIcon, rightIcon, showLogout = true, onAddHome, onAddFavorite, onGoBack, children }) {

    //导航
    const history = useHistory()

    // 获取 Redux 分发器
    const dispatch = useDispatch()

    //loading状态
    const [maskVisible, setMaskVisible] = useState(false)

    //是否可以显示抽屉
    const [canShowDrawer, setCanShowDrawer] = useState(false)

    //客服抽屉状态
    const [isDrawerOpen, setIsDrawerOpen] = useState(false);

    // 文案翻译
    const [curLang, setCurLang] = useState(LangThai);

    //显示抽屉
    const onHandleOpenDrawer = () => {
        if (onGoBack) {
            onGoBack()
            return;
        } else {
            history.goBack();
            return;
        }
        // 暂时关闭
        //可以显示抽屉
        // setCanShowDrawer(true)

        // if (!appConfigInfo.mobileList) {
        //     getAppConfigInfo()
        // } else {
        //     setIsDrawerOpen(true);
        // }
    }



    //启动初始化
    useEffect(() => {


    }, [])

    let addHomeIcon = icon_add_favorite
    let hotlineIcon = icon_back_black
    let extBgStyle = "navBarThemeWhite"
    let extTextColor = "whiteTextColor"
    if (theme === 'black') {
        extBgStyle = "navBarThemeBlack"
        extTextColor = "whiteTextColor"
        hotlineIcon = icon_back_white
        addHomeIcon = icon_add_favorite_white

    } else if (theme === 'white') {
        extBgStyle = "navBarThemeWhite"
        extTextColor = "blackTextColor"
        hotlineIcon = icon_back_black
        addHomeIcon = icon_add_favorite

    } else if (theme === 'transparent') {
        extBgStyle = "navBarThemeTransparent"
        extTextColor = "whiteTextColor"
        hotlineIcon = icon_back_white
        addHomeIcon = icon_add_favorite_white
    }

    if (leftIcon) {
        hotlineIcon = leftIcon
    }

    if (rightIcon) {
        addHomeIcon = rightIcon
    }

    return (
        <div className={`navBarRoot ${extBgStyle}`}>
            {/* 后退按钮 */}
            <div className="navBarLeft">
                <img className="navBackImage" src={hotlineIcon} onClick={() => { onHandleOpenDrawer() }} alt='' />
            </div>

            {/* 居中标题 */}
            <div className={`navBarTitle ${extTextColor}`}>{children}</div>

            {/* 右侧内容 */}
            <div className="navBarRight">
                {rightIcon && <img className="navBackImage" src={rightIcon} onClick={() => { onAddFavorite() }} alt='' />}
            </div>

            {/* 抽屉内容 */}
            {/* {false && <HotlineDrawer isOpen={isDrawerOpen} onClose={onHandleCloseDrawer}>

            </HotlineDrawer>} */}

            <Mask visible={maskVisible} opacity={0.1}
                onMaskClick={() => { }}>
                <div className="overlayContent">
                    <span style={{ fontSize: 24, color: '#ff3141' }} >
                        <DotLoading color="currentColor" />
                    </span>
                </div>
            </Mask>
        </div>
    )
}

export default NavigateBar